
import BaseView from './BaseView'
import loader from '../loader'
import _ from 'underscore'


var NavigationView = BaseView.extend({
  type: "NavigationView",

  initialize: function () {
    BaseView.prototype.initialize.apply(this, arguments);
    // stack to only store the path order {path: 'page1', params:{}}
    this.stack = [];
    //cache all page
    this.pageMap = {};
    window.addEventListener('hashchange', this.route.bind(this), false);
    window.addEventListener('load', this.route.bind(this), false);
    //TODO 从配置读取
    window.location.href= '#NewIndex';

  },

  route: function () {
    console.log(location.hash);
    var path = location.hash.slice(1);
    if (this.curent_path == "NewIndex" && path == "Detail" && window.yyesn._initialized) {
      //关闭webview
      window.yyesn.client.closePage();
      return;
    }
    if (this.curent_path == path) return;
    this.curent_path = path;

    // 当前页面，栈顶
    var id = this.stack.length >0 && this.stack[this.stack.length - 1].path;
    var currentPage =  id && this.pageMap[id];


    var isBack = this.stack.length > 1 && this.stack[this.stack.length - 2].path == path;

    if (!currentPage) {
      var View = loader.getPage(path).default;
      this.pageMap[path] = new View({views: [{type:"html", template: path +".html"}]});
        console.log(this.pageMap[path]);
        var page = this.pageMap[path].$el;
      document.body.appendChild(this.pageMap[path].el);
      this.pageMap[path].onResume();
      this.stack.push({path: path, params:{}});
    } else {
      if (isBack) {
        //回退页
        var nextPage = this.pageMap[path];

        document.body.insertBefore(nextPage.el, currentPage.el);
        var tabbar = nextPage.$el.find(".mui-bar-tab")[0];

        setTimeout(function () {
          //不启动动画

          if (nextPage.$el.find(".mui-bar-tab")[0] && currentPage.$el.find(".mui-bar-tab")[0]) {
            currentPage.removeElement();
          } else {
            //有些浏览器有fixed问题 把动画启用就可以 magic
            // nextPage.animateSlideInLeft(function () {
            //
            // })
            //为了避免后退箭头等造成颜色闪烁
            var header = currentPage.$el.find('header')[0];
            if (header) {
              var leftIcon = header.querySelector(".header-left-icon");
              if (leftIcon) leftIcon.style.visibility = 'hidden'
            }

            currentPage.animateSlideOutRight(function () {
              currentPage.removeElement();
              if (leftIcon) leftIcon.style.visibility = 'visible'
            })
          }
          var param = currentPage.getRouteParam();
          currentPage.clearRouteParam();
          nextPage.route && nextPage.route(param);
          nextPage.onResume();
          this.stack.pop();
        }.bind(this), 10)


      } else {
        if (!this.pageMap[path]) {
          var View = loader.getPage(path).default;
          this.pageMap[path] = new View({views: [{type:"html", template: path +".html"}]});
        }

        var nextPage = this.pageMap[path];
        // document.body.appendChild(nextPage.el);
        document.body.insertBefore(nextPage.el, currentPage.el);

        //移动浏览器上 做延时处理避免动画失效
        setTimeout(function () {
          if (nextPage.$el.find(".mui-bar-tab")[0] && currentPage.$el.find(".mui-bar-tab")[0]) {
            currentPage.removeElement();
          } else {
            nextPage.animateSlideInRight(function () {
              // console.log(2);
            })
            currentPage.animateSlideOutLeft(function () {
              currentPage.removeElement();
            })

          }
          var param = currentPage.getRouteParam();
          currentPage.clearRouteParam();
          nextPage.route && nextPage.route(param);
          nextPage.onResume();
          this.stack.push({path: path, params:{}});
        }.bind(this), 10)




      }

    }


  },


})


var a = new NavigationView();
// a.route("Page1");


export default  NavigationView
